import React, { Component } from 'react'
import {HashRouter as Router,Routes,Route} from  "react-router-dom"
import Home from './pages/Home'
import About from './pages/About'
import List from './pages/List'
import Mine from './pages/Mine'
import Login from './pages/Login'
import Register from './pages/Register'
import UseState from './pages/UseState'
import UseEffect from './pages/UseEffect'
import User from './pages/User'
import UseContext from "./pages/UseContext"
import UseReducer from './pages/UseReducer'
import UseCallBack from './pages/UseCallBack'
import UseMemo from './pages/UseMemo'
import UseRef from './pages/UseRef'
import UseLayoutEffect from './pages/UseLayoutEffect'
import UseDeferredValue from  "./pages/UseDeferredValue"
import UseRequest from './pages/UseRequest'
import DefineHooks from './pages/DefineHooks'

export default class App extends Component {
  render() {
    return (
      <div>
<div>
    <a href='#/'>首页|</a>
    <a href='#/about'>关于|</a>
    <a href='#/list'>列表|</a>
    <a href='#/mine'>我的|</a>
    <a href='#/usestate'>UseState</a>|
    <a href='#/useeffect'>UseEffect</a>|
    <a href='#/user'>用户管理</a>|
    <a href='#/usecontext'>UseContext</a>|
    <a href='#/usereducer'>UseReducer</a>|
    <a href='#/usecallback'>UseCallBack</a>|
    <a href='#/usememo'>UseMemo</a>|
    <a href='#/useref'>UseRef</a>|
    <a href='#/uselayouteffect'>UseLayoutEffect</a>|
    <a href='#/usedeferredvalue'>Usedeferredvalue</a>|
    <a href='#/userequest'>UseRequest</a>|
    <a href='#/defineHook'>DefineHook</a>|
</div>
        <Router>
            <Routes>
                    <Route path='/' element={<Home></Home>} exact></Route>
                    <Route path='/about' element={<About></About>} ></Route>
                    <Route path='/list' element={<List></List>} ></Route>
                    <Route path="/mine" element={<Mine></Mine>}>
                        <Route path="/mine/" element={<Login></Login>} exact></Route>
                        <Route path="/mine/login" element={<Login></Login>} ></Route>
                        <Route path="/mine/register" element={<Register></Register>} ></Route>
                    </Route>
                    <Route path="/usestate" element={<UseState></UseState>}></Route>
                    <Route path="/useeffect" element={<UseEffect></UseEffect>}></Route>
                    <Route path="/user" element={<User></User>}></Route>
                    <Route path="/usecontext" element={<UseContext></UseContext>}></Route>
                    <Route path="/usereducer" element={<UseReducer></UseReducer>}></Route>
                    <Route path="/usecallback" element={<UseCallBack></UseCallBack>}></Route>
                    <Route path="/usememo" element={<UseMemo></UseMemo>}></Route>
                    <Route path="/useref" element={<UseRef></UseRef>}></Route>
                    <Route path="/uselayouteffect" element={<UseLayoutEffect></UseLayoutEffect>}></Route>
                    <Route path="/usedeferredvalue" element={<UseDeferredValue></UseDeferredValue>}></Route>
                    <Route path="/userequest" element={<UseRequest></UseRequest>}></Route>
                    <Route path="/defineHook" element={<DefineHooks></DefineHooks>} ></Route>
                  </Routes>

        </Router>
      </div>
    )
  }
}
